<!DOCTYPE html>
<html>
    <head>
        <title>Calculator</title>
        <link rel="stylesheet" type="text/css" href="styles/style.css" />
    </head>

    <body>
        <div class="window-wrap">
            <div id="calc-icon" >
                <span style="vertical-align:middle">Calculator</span>
            </div>
            <div class="window-buttons">
                <div id="minimize-button"  class="lightButtons">&mdash;</div>
                <div id="resize-button" class="lightButtons"></div>
                <div id="closeButton">x</div>
            </div>
            <nav>
                <ul>
                    <li>View</li>
                    <li>Edit</li>
                    <li>Help</li>
                </ul>
            </nav>
            <div id="content">
                <table id="second-display">
                    <div id="display">8854455</div>

                    <tr>
                        <td>0000</td>
                        <td>0000</td>
                        <td>0000</td>
                        <td>0000</td>
                        <td>0000</td>
                        <td>0000</td>
                        <td>0000</td>
                        <td>0000</td>
                    </tr>
                    <tr>
                        <td id="padright">63</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td id="padright">47</td>
                        <td></td>
                        <td></td>
                        <td id="padleft">32</td>
                    </tr>
                    <tr>
                        <td>0000</td>
                        <td>0000</td>
                        <td>1000</td>
                        <td>0111</td>
                        <td>0001</td>
                        <td>1011</td>
                        <td>1011</td>
                        <td>0111</td>
                    </tr>
                    <tr>
                        <td id="padright">31</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td id="padright">15</td>
                        <td></td>
                        <td></td>
                        <td id="padleft">0</td>
                    </tr>
                </table>
                <table>
                    <tbody>
                        <tr>
                            <td rowspan="3" class="bordered">
                                <form>
                                    <input type="radio" name="numSystem">Hex<br />
                                    <input type="radio" name="numSystem" checked>Dec<br />
                                    <input type="radio" name="numSystem">Oct<br />
                                    <input type="radio" name="numSystem">Bin
                                </form>
                            </td>
                            <td>
                                <button class="noBackground"></button>
                            </td>
                            <td>
                                <button>Mod</button>
                            </td>
                            <td>
                                <button class="noBackground">A</button>
                            </td>
                            <td>
                                <button class="noBackground">MC</button>
                            </td>
                            <td>
                                <button class="noBackground">MR</button>
                            </td>
                            <td>
                                <button class="noBackground">MS</button>
                            </td>
                            <td>
                                <button class="noBackground">M+</button>
                            </td>
                            <td>
                                <button class="noBackground">M-</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button>(</button>
                            </td>
                            <td>
                                <button>)</button>
                            </td>
                            <td>
                                <button class="noBackground">B</button>
                            </td>
                            <td>
                                <button>&larr;</button>
                            </td>
                            <td>
                                <button>CE</button>
                            </td>
                            <td>
                                <button>C</button>
                            </td>
                            <td>
                                <button>+-</button>
                            </td>
                            <td>
                                <button class="noBackground">&radic;</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button>RoL</button>
                            </td>
                            <td>
                                <button>RoR</button>
                            </td>
                            <td>
                                <button class="noBackground">C</button>
                            </td>
                            <td>
                                <button id="number">7</button>
                            </td>
                            <td>
                                <button id="number">8</button>
                            </td>
                            <td>
                                <button id="number">9</button>
                            </td>
                            <td>
                                <button>/</button>
                            </td>
                            <td>
                                <button class="noBackground">%</button>
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="3" class="bordered">
                                <form>
                                    <input type="radio" name="bits" checked>Qword<br />
                                    <input type="radio" name="bits">Dword<br />
                                    <input type="radio" name="bits">Word<br />
                                    <input type="radio" name="bits">Byte
                                </form>
                            </td>
                            <td>
                                <button>Or</button>
                            </td>
                            <td>
                                <button>Xor</button>
                            </td>
                            <td>
                                <button class="noBackground">D</button>
                            </td>
                            <td>
                                <button id="number">4</button>
                            </td>
                            <td>
                                <button id="number">5</button>
                            </td>
                            <td>
                                <button id="number">6</button>
                            </td>
                            <td>
                                <button>*</button>
                            </td>
                            <td>
                                <button class="noBackground">1/x</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button>Lsh</button>
                            </td>
                            <td>
                                <button>Rsh</button>
                            </td>
                            <td>
                                <button class="noBackground">E</button>
                            </td>
                            <td>
                                <button id="number">1</button>
                            </td>
                            <td>
                                <button id="number">2</button>
                            </td>
                            <td>
                                <button id="number">3</button>
                            </td>
                            <td>
                                <button>-</button>
                            </td>
                            <td rowspan="2">
                                <button class="tall">=</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button>Not</button>
                            </td>
                            <td>
                                <button>And</button>
                            </td>
                            <td>
                                <button class="noBackground">F</button>
                            </td>
                            <td  colspan="2">
                                <button class="long" id="number">0</button>
                            </td>
                            <td>
                                <button class="noBackground">.</button>
                            </td>
                            <td>
                                <button>+</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>
